<template>
  <div>
    <van-nav-bar
      class="app-nav-bar"
      title="学时曲线"
      left-arrow
      @click-left="$router.back()"
    />
    <div id="charts" style="width: 100%;height: 30vh"></div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {

    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.initChart()
  },
  methods: {
    // 获取需要生成图表的元素
    // 以下是一些常用的配置参数 都有写明详细的注释
    initChart () {
      const echarts = this.$echarts.init(document.getElementById('charts'))
      const option = {
        xAxis: {
          type: 'category',
          data: ['4', '5', '6', '7', '8', '9', '10'],
          splitLine: {
            show: true, // 纵向分割线显示
            lineStyle: { // 纵向分割线样式设置
              color: 'rgba(242, 0, 0, 1)' // 如果值是一个数组的话 就可以给每条线设置不同样式
            }
          },
          splitArea: { show: false }, // 纵向背景区域
          axisTick: { show: false }, // 除去x轴的刻度
          axisLine: {
            lineStyle: { color: '#000', width: 0, height: 0 } // x轴
          },
          boundaryGap: false, // 使折点与x轴的数值对齐 为true时是与刻度对齐
          axisLabel: { // 控制x轴文本
            show: true,
            textStyle: { color: '#000', fontSize: 12 }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: { show: false },
          axisLine: {
            lineStyle: { color: '#000', width: 0 } // y轴
          }
        },
        series: [{
          lineStyle: { // 折线颜色
            normal: {
              color: '#888'
            }
          },
          smooth: true,
          // symbol: 'circle', //设定为实心点
          symbolSize: 4, // 设置折点的大小
          itemStyle: {
            normal: { // 折点颜色
              label: { // 为true时  设置拐点上方值 格式'{b}:{c}'
                show: false,
                formatter: '{c}'
              },
              color: 'blue',
              width: 3
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          // data: [45, 50, 51, 50, 49, 48, 53],
          data: [
            { value: 45 },
            { value: 50 },
            { value: 51 },
            { value: 50 },
            { value: 49 },
            { value: 48 },
            { value: 60, label: { show: true } } // 给指定的拐点上方显示值
          ],
          type: 'line'
        }],
        grid: { // 设置网格距离canvase外层盒子距离
          x: 40,
          y: 30,
          x2: 40,
          y2: 70
        }
      }
      echarts.setOption(option)
    }
  }
}
</script>

<style scoped lang="">

</style>
